前端vue实现图片压缩并且将其转换为jpg格式图片；前端转换图片格式；前端使用js转换图片格式；前端使用canvas将png格式图片转成jpg格式

2023-07-23 16:53| 来源: 网络整理| 查看: 265

需求中可能有时需要将png图片转成jpg图片或者格式互转，前端使用js和canvas转换图片的格式；

原理：是使用FileReader来把文件读入内存，并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统，读取文件中的数据，且读取后 result 为 DataURL, DataURL 可直接赋值给 img.src；然后通过canvas.toDataURL(type)输出相应格式的图片；

方法一：原文链接以及参考链接

方法二：前端vue实现图片压缩并且将其转换为jpg格式图片

以下代码可直接复制：

Document jpeg格式 webp格式 png格式开始转换预览： /*事件*/ document.getElementById('start').addEventListener('click', function () { getImg(function (image) { console.log(2); var can = imgToCanvas(image) imgshow = document.getElementById("imgShow"); imgshow.setAttribute('src', canvasToImg(can)); }); }); // 把image 转换为 canvas对象 function imgToCanvas(image) { console.log(3); var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; } //canvas转换为image function canvasToImg(canvas) { console.log(4); var array = ["image/jpeg", "image/webp", "image/png"] type = document.getElementById('myselect').value - 1; console.log(canvas); var src = canvas.toDataURL(array[type]); // console.log(src); return src; } //获取图片信息 function getImg(fn) { var imgFile = new FileReader(); console.log(1, imgFile); try { // 使用FileReader来把文件读入内存，并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统，读取文件中的数据，且读取后 result 为 DataURL, DataURL 可直接赋值给 img.src imgFile.readAsDataURL(document.getElementById('inputimg').files[0]); console.log(imgFile); imgFile.onload = function (e) { console.log(e); var image = new Image(); image.src = e.target.result; //base64数据 image.onload = function () { fn(image); } } } catch (e) { console.log("请上传图片！" + e); } }

【本文地址】

公司简介

联系我们